<template>
    <div v-loading="loadingData" class="userTable">
        <el-table :data="tableData" border style="width: 100%" 
            :header-cell-class-name="headerCellClassName"
            :row-class-name="tableRowClassName">
            <el-table-column fixed  prop="id"  label="问题编号"  width="200"></el-table-column>
            <el-table-column prop="user"   label="提交人"  width="100"></el-table-column>
            <el-table-column prop="gameId"  label="ID" width="150"></el-table-column>
            <el-table-column prop="phone" label="联系方式"  width="150"></el-table-column>
            <el-table-column prop="dataTime"  label="时间" width="300"></el-table-column>
            <el-table-column label="内容" width="150">
                <template slot-scope="scope">
                    <span class="table-slice">{{scope.row.contemt.slice(0,15)}}...<a class="chakanxq" href="#">查看详情</a></span>
                </template>
            </el-table-column>
            <el-table-column label="附件" width="150">
                <template slot-scope="scope">
                    <div class="imgPath-box">   
                        <img :src="scope.row.imgPath" alt="" width="100" height="50">
                        <span class="big-pic"></span>
                        <span class="big-pic-font" @click="bigPic(scope.row.imgPath)">点击查看大图</span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column fixed="right"  label="操作"  width="150">
                <template slot-scope="scope">
                    <el-button v-if="scope.row.type == 1" @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                    <el-button v-else type="text" size="small" @click="toDealWith(scope.row)">处理</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog
            title="问题处理"
            :visible.sync="dialogVisible"
            width="670px">
            <ul class="user-box clearfix">
                <li>
                    <label>编号</label>
                    <span class="input">{{problemObj.id}}</span>
                </li>
                <li>
                    <label>处理结果</label>
                    <textarea class="liTextarea" name="" id="" cols="30" rows="10"></textarea>
                </li>
                <li>
                    <label>奖励/补偿</label>
                    <span>
                        <font>￥5.00</font>
                        <font>￥10.00</font>
                        <font>￥20.00</font>
                    </span>
                </li>
                <li>
                    <label>角色描述</label>
                    <div class="adduser-buttom">
                        <el-button @click="dialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="dialogVisible = false">保 存</el-button>
                    </div>
                </li>
            </ul>
        </el-dialog>
        <!--分页开始-->
        <div class="block">
            <span class="pageFreshFoot"><el-button type="text" class="xin" @click="xin()">刷新</el-button></span>
            <div class="pageComponentFoot">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="cpage"
                    :page-sizes="[10,20,30,40]"
                    :page-size="pagesize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="totalCount">
                </el-pagination>
            </div>
            <div style="clear:both"></div>
        </div>
        <!--分页结束-->
    </div>
</template>

<script>
    import '@/mock/user.js';

    export default {
        data() {
            return {  
                dialogVisible:false,
                totalPage:10,           //  总页数
                cpage:1,                //  当前页
                pagesize:10,            //  每页显示数
                totalCount:100,         //  总条数
                tableData: [{
                    id:111,
                    user:'张三',
                    gameId:'1111',
                    phone:'18792939231',
                    dataTime:'2018-08-15',
                    contemt:'这个游戏号有问题，问题特别的大，我已经快无语了！',
                    imgPath:'https://img1.5173.com//76d958d0f4804086b96a294a83d6993f.jpg',
                    type:1
                },{
                    id:111,
                    user:'张三',
                    gameId:'1111',
                    phone:'18792939231',
                    dataTime:'2018-08-15',
                    contemt:'这个游戏号有问题，问题特别的大，我已经快无语了！',
                    imgPath:'https://img1.5173.com//76d958d0f4804086b96a294a83d6993f.jpg',
                    type:1
                },{
                    id:111,
                    user:'张三',
                    gameId:'1111',
                    phone:'18792939231',
                    dataTime:'2018-08-15',
                    contemt:'这个游戏号有问题，问题特别的大，我已经快无语了！',
                    imgPath:'https://img1.5173.com//76d958d0f4804086b96a294a83d6993f.jpg',
                    type:2
                },],            
                multipleSelection: [],       
                select_word: '',
                loadingData: false,
                problemObj:'',
            }
        },
        created(){         
        },
        mounted() {  
            
        },
        methods: {
            // 设置header颜色
            headerCellClassName({row, rowIndex}){
                return 'header-row';
            },
            // 设置内容行的颜色
            tableRowClassName({row, rowIndex}) {
                if (rowIndex % 2 === 1) {
                    return 'even-row';
                }   
                return '';
            },

            handleClick(row) {
                console.log(row);
            },
            hidden(){},
            // 查看大图
            bigPic(imgPath){
                this.$alert('<img src="'+ imgPath +'">',{
                    dangerouslyUseHTMLString: true,
                    closeOnClickModal:true
                })
            },
            // 处理问题
            toDealWith(item){
                this.dialogVisible = true
                this.problemObj = item
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            }
        }
    }
</script>

<style>
    
</style>
<style src="../../assets/css/problem.css"></style>